<template>
  <div class="dashboard-editor-container">
    <pie-chart :chart-data="chartData" :height="chartHeight"></pie-chart>
  </div>
</template>

<script>
  import PieChart from "./components/PieChart";

  export default {
    name: 'Pie',
    components: {PieChart},
    data() {
      return {
        info: null,
        chartHeight: '100px',
        chartData: {
          title: '成绩概况',
          projects: ['MySql', 'Java', 'Springboot', 'Vue', 'Android'],
          items: [
            {
              name: 'Chris',
              radius: [45, 285],
              dataList: [
                {value: 100, name: 'MySql'},
                {value: 99, name: 'Java'},
                {value: 78, name: 'Springboot'},
                {value: 43, name: 'Vue'},
                {value: 59, name: 'Android'}
              ]
            },
            // {
            //   name: 'Kaly',
            //   radius: [15, 95],
            //   dataList: [
            //     {value: 57, name: 'MySql'},
            //     {value: 88, name: 'Java'},
            //     {value: 92, name: 'Springboot'},
            //     {value: 68, name: 'Vue'},
            //     {value: 75, name: 'Android'}
            //   ]
            // }
          ]
        }
      }
    },
    created() {
      const h = window.innerHeight;
      this.chartHeight = (h - 50-64) + 'px';//padding
      //console.log(this.chartHeight);
    },
    methods: {
      handleClick(message) {
        this.$message(message);
      },
      showInfo(info) {
        this.$alert(info, '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${action}`
            });
          }
        });
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }

  @media (max-width: 1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
</style>
